<template>
  <div v-loading="loading" class="app-container">
    <div class="filter-container">

      <!-- 头部导航搜索添加等 -->

      <el-input v-model="listQuery.title" placeholder="输入关键词" style="width: 200px;" class="filter-item" @input="handleFilter()" @keyup.enter.native="handleFilter" />

      <!--    <el-select v-model="listQuery.sort" style="width: 140px; margin-left: 10px;" class="filter-item" @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select> -->

      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        新增
      </el-button>

    </div>

    <!-- 列表主体 -->
    <el-table

      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    ><!--  -->
      <el-table-column label="简介" align="center">
        <template slot-scope="{row}">
          <span>{{ row.msg }}</span>
        </template>
      </el-table-column>
      <el-table-column label="KEY" prop="id" align="center">
        <template slot-scope="{row}">
          <span>{{ row.key }}</span>
        </template>
      </el-table-column>
      <el-table-column label="VALUE" align="center">
        <template slot-scope="{row}">
          <span>{{ row.value }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排序" align="center">
        <template slot-scope="{row}">
          <span>{{ row.sort }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">

          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            修改
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row,$index,row.key)">
            删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    
    <!-- 添加修改 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :model="temp" label-position="top" label-width="70px" style="width: 400px; margin-left:50px;">

        <el-form-item label="KEY" prop="name">
          <el-input v-model="temp.key" />
        </el-form-item>
        <el-form-item label="VALUE" prop="name">
          <el-input v-model="temp.value" />
        </el-form-item>
        <el-form-item label="简介" prop="name">
          <el-input v-model="temp.msg" />
        </el-form-item>
        <el-form-item label="排序" prop="name">
          <el-input v-model="temp.sort" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确认
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
// 引入api
import api from '@/api/system/message.js'

// 引入分页
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  components: { Pagination },
  data() {
    return {
      // 分页
      total: 0,
      pagesizes: [10, 30, 60, 100],
      // 数据
      tableData: [],
      // 提交数据
      temp: {

      },
      // 应有数据
      temp_: {

      },
      // 判定加载
      loading: false,
      // 判定where
      listQuery: {
        page: 1,
        limit: 10,
        title: null,
        sort: 'asc'
      },
      // 判定显示
      dialogFormVisible: false,
      // 判定修改or添加
      dialogStatus: '',
      // 判定修改id
      up_id: 0,
      // 列表匹配数据群
      textMap: {
        update: '修改',
        create: '添加'
      },
      affix2: [
        {
          value: 0,
          label: '保留'
        },
        {
          value: 1,
          label: '不保留'
        }
      ],
      show: [
        {
          value: 0,
          label: '展示'
        },
        {
          value: 1,
          label: '不展示'
        }
      ],
      sortOptions: [
        { label: 'ID 升序', key: 'asc' },
        { label: 'ID 降序', key: 'desc' }
      ]
    }
  },
  // 进入页面加载数据
  created() {
    this.list()
  },
  methods: {
    // 删除
    handleDelete(row, index, id) {
      this.$confirm('此操作将永久删除该路由, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        api.del({

          id: id
        }).then(() => {
          // this.list.unshift(this.temp)
          this.loading = false
          this.list()
          this.dialogFormVisible = false
          this.$notify({
            title: '提示',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        })
      }).catch((res) => {
        console.log(res)
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改
    updateData() {
      this.loading = true
      var than = this
      console.log(this.temp)
      api.update({

        id: this.up_id,
        temp: this.temp
      }).then(res => {
        this.list()
        this.dialogFormVisible = false
        // router.addRoutes(res)
      }).catch((res) => {
        console.log('22222')
        than.loading = false
      })
    },
    // 添加
    createData() {
      this.loading = true
      var than = this
      console.log(this.temp)
      api.add({

        temp: this.temp
      }).then(res => {
        this.list()
        this.dialogFormVisible = false
        // router.addRoutes(res)
      }).catch((res) => {
        console.log('22222')
        than.loading = false
      })
    },
    // 还原提交数据
    resetTemp() {
      for (var key in this.temp) {
        delete this.temp[key]
      }
    },
    // 添加前钩子
    handleCreate(pid) {
      this.resetTemp(pid)
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 修改前钩子
    handleUpdate(row) {
      this.up_id = row.key
      this.temp = Object.assign({}, row) // copy obj
      console.log(this.temp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 获取列表
    list(title) {
      this.loading = true
      var than = this

      api.list({

        listQuery: this.listQuery
      }).then(res => {
        than.tableData = res.data.list
        than.total = res.data.count

        than.loading = false
        // router.addRoutes(res)
      }).catch((res) => {
        console.log('22222')
        than.loading = false
      })
    },
    // 排序
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    sortByID(order) {
      if (order === 'ascending') {
        this.listQuery.sort = 'asc'
      } else {
        this.listQuery.sort = 'desc'
      }
      this.handleFilter()
    },
    // 还原数据
    handleFilter() {
      this.listQuery.page = 1
      this.list()
    }
  }
}
</script>
